<template>
  <div>
    <div
      v-if="result"
      class="cla"
      :style="{
        'background-image': `url(${result.playlist.coverImgUrl})`,
        'background-origin': 'center center',
      }"
    ></div>
    <div class="songpic">
      <div class="left">
        <img v-if="result" :src="result.playlist.coverImgUrl" />
      </div>
      <div class="right">
        <h1 v-if="result">{{ result.playlist.name }}</h1>
        <div class="bottom">
          <img v-if="result" :src="result.playlist.creator.avatarUrl" />
          <h2 v-if="result">{{ result.playlist.creator.nickname }}</h2>
        </div>
      </div>
    </div>
    <div style="background: #eeeff0; color: #666666">歌曲列表</div>
    <music-list
      @play="$emit('play', $event)"
      :songlist="songList"
      :shownum="true"
    ></music-list>
    <div>精彩评论</div>
    <div>
      <!-- <ul  v-for="i in result" :key="i"> -->
        <!-- <li v-if="result"> -->
          <!-- <div>
            <img :src="result.hotComments.user.avatarUrl" />
          </div>
          <div>
            <h2>{{ result.hotComments.user.nickname }}</h2>
            <p>{{ result.hotComments.content }}</p>
          </div>
          <div>{{ result.hotComments.likedCount }}</div> -->
        <!-- </li> -->
      <!-- </ul> -->
    </div>
    <!-- <div>
            <img v-if="result" :src="result.playlist.avatarUrl" alt="">
            <div><h2>{{result.playlist.nickname}}</h2>
            <p>{{result.playlist.comments[index].content}}</p>
            </div>
        </div> -->
  </div>
</template>
<script>
import MusicList from "@/components/MusicList.vue";
export default {
  props: {
    listid: [String, Number],
    // comments:Array,
    // playlist:Array,
  },
  data() {
    return {
      songList: [],
      result: null,
      // nickname: "",
      // hotComments: "",
      // playlist: [],
    };
  },
  beforeRouteEnter(to, from, next) {
        next(vm=>{
            vm.axios.get(`/playlist/detail?id=${vm.listid}`).then((result)=>{
                vm.result=result;
                let re=result.playlist.tracks.map((v,index)=>{
                    v.song={
                        privilege:result.privileges[index],
                        artists:v.ar,
                        album:v.al
                    }
                    return v;
                })
                vm.songList=re;
            });
            //调用评论,
            vm.axios.get(`/comment/playlist?id=${vm.listid}`).then(result=>{
                console.log("评论==>",result)
            })
        });
  },
  components: {
    MusicList,
  },
};
</script>
<style scoped lang="less">
.cla {
  z-index: -1;
  background-size: auto 100%;
  filter: blur(30px);
  height: 135px;
  position: absolute;
  width: 100%;
  left: 10px;
}
.songpic {
  display: flex;
  height: 170px;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  .left {
    flex: 1;
    img {
      width: 130px;
      height: 130px;
      margin: 20px;
    }
  }
  .right {
    flex: 1;
    .bottom {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-top: 30px;
      margin-left: -10px;
    }
    h1 {
      padding-top: 30px;
      margin-left: -10px;
    }
    h2 {
      font-size: 14px;
      padding: 5px;
      color: #e5e3e3;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
}
</style>